import { ProColumns, ProTable } from '@ant-design/pro-components';
import '@umijs/max';
import { Modal } from 'antd';
import React, {useEffect, useRef} from 'react';
import {ProFormInstance} from "@ant-design/pro-form/lib";

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.InterfaceInfo>;

export type createProps = {
  columns: ProColumns<API.InterfaceInfo>[];
  onCancel: () => void;
  onSubmit: (values: API.InterfaceInfo) => Promise<void>;
  createModalOpen: boolean;
};
const createModal: React.FC<createProps> = (props) => {
  const { columns, createModalOpen, onCancel, onSubmit } = props; //结构赋值语法
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const formRef = useRef<ProFormInstance>();
  const currentRow:API.InterfaceInfo={
    description: null,
    method: null,
    name: null,
    requestHeader: ``,
    requestParams: ``,
    responseHeader: ``,
    updateTime: null,
    url: null,
    userId: null
  };
  useEffect(()=>{
    formRef?.current?.setFieldsValue(currentRow)
  },[currentRow])

  return (
    <Modal open={createModalOpen} footer={null} onCancel={()=>onCancel()}>
      <ProTable
        type="form"
        columns={columns}
        formRef={formRef}
        onSubmit={async (value) => {
          onSubmit(value);
        }}
      ></ProTable>
    </Modal>
  );
};
export default createModal;
